<template>
  <div class="home">
    <div class="navbar">
      <div class="navbar-left">
        <span :class="{ active: curType === 2 }" @click="fn(2)">综合</span>

        <span :class="{ active: curType === 1 }" @click="fn(1)">最新</span>

        <span :class="{ active: curType === 3 }" @click="fn(3)">最热</span>
      </div>
      <div class="navbar-right">
        <span @click="click">全部 {{ isFlag }}</span>
      </div>
      <div class="navbar-side" v-show="isShow">
        <p :class="{active:showType === 6}" @click="all(6)">全部</p>
        <p :class="{active:showType === 7}" @click="all(7)">入门</p>
        <p :class="{active:showType === 8}" @click="all(8)">提升</p>
      </div>
    </div>

    <div>
      <hello-world
        v-for="item in info"
        :key="item.id"
        :content="item"
      ></hello-world>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "HomeView",
  data() {
    return {
      isShow: false, // 控制侧边栏显示隐藏
      isFlag: "∨",
      curType: 2, // 控制显示 综合 最新 最热 那个高亮
      info: [], // 保存数据
      showType: 6,
    };
  },
  methods: {
    click() {
      this.isShow = !this.isShow;
      if (!this.isShow) {
        this.isFlag = "∨";
      } else {
        this.isFlag = "∧";
      }
    },
    fn(type) {
      this.curType = type;
      // console.log(this.curType);
      fetch(
        `https://m.lanqb.com/api/course/video?course_fields_ids=6&type=${this.curType}&limit=8&page=1`
      )
        .then((res) => res.json())
        .then((data) => {
          this.info = data.data;
          console.log(this.info);
        });
    },
    all(type) {
      this.showType = type;
      if (this.showType == 7) {
        fetch(
          `https://m.lanqb.com/api/course/video?course_fields_ids=6&type=${this.curType}&level=1&limit=8&page=1`
        )
          .then((res) => res.json())
          .then((data) => {
            this.info = data.data;
            console.log(this.info);
          });
      } else if (this.showType == 8) {
        fetch(
          `https://m.lanqb.com/api/course/video?course_fields_ids=6&type=${this.curType}&level=2,3,4,5&limit=8&page=1`
        )
          .then((res) => res.json())
          .then((data) => {
            this.info = data.data;
            console.log(this.info);
          });
      } else {
        fetch(
          `https://m.lanqb.com/api/course/video?course_fields_ids=6&type=${this.curType}&limit=8&page=1`
        )
          .then((res) => res.json())
          .then((data) => {
            this.info = data.data;
            console.log(this.info);
          });
      }
    },
  },
  created() {
    fetch(
      "https://m.lanqb.com/api/course/video?course_fields_ids=6&type=2&limit=8&page=1"
    )
      .then((res) => res.json())
      .then((data) => {
        this.info = data.data;
        console.log(this.info);
      });
  },
  components: {
    HelloWorld,
  },
};
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
.home {
  padding: 0 10px;
  padding-top: 30px;
  height: 706px;
  overflow-y: scroll;   // 开启滚动
}
// .home ::-webkit-scrollbar {
//   display: none;
// }
.navbar {
  height: 50px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  position: fixed;
  top: 0;
  width: 92%;
  .navbar-left {
    span {
      margin-right: 10px;
    }
  }
  .navbar-side {
    width: 100px;
    height: 180px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px gray;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50px;
  }
  .active {
    color: blue;
  }
}
</style>
